  <template>
    <div>
    <el-button type="text" @click="items.push({key:'',value:'',group:''})" style="float:right;margin-right:20px;">添加</el-button>
    <el-table
      :data="items"
      style="width: 100%">
      <el-table-column
        label="key"
        width="180">
        <template slot-scope="{row}">
          <el-input v-model="row.key" type="text"/>
        </template>
      </el-table-column>
      <el-table-column
        label="value"
        width="180">
        <template slot-scope="{row}">
          <el-input v-model="row.value" type="text"/>
        </template>
      </el-table-column>
      <el-table-column
        label="group">
        <template slot-scope="{row}">
          <el-input v-model="row.group" type="text"/>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="{row}">
          <el-button @click="del(row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </template>

  <script>

    const isEq = ({key,value,group},row)=> {
      return key == row.key && value == row.value && group == row.group;
    }

    let valueTimeout = null;
    let itemsTimeout = null;

    export default {

      mounted(){
        this.items = this.value || [];
      },

      data() {
        return {
          items: [],
          __prev_chg:false
        }
      },

      props:['value'],

      watch:{

        value(newVal){
          if(this.__prev_chg)
           return;
          clearTimeout(valueTimeout);
          valueTimeout = setTimeout(() => {
            this.prevChg();
            this.items = newVal || [];
          },50);
        },

        items(newVal){
          if(this.__prev_chg)
           return;
          clearTimeout(itemsTimeout);
          itemsTimeout = setTimeout(()=>{
            this.prevChg();
            this.$emit('input',newVal || []);
          },50);
        },

      },

      methods:{

        prevChg(){
          this.__prev_chg = true;
          setTimeout(()=>{
            this.__prev_chg = false;
          },50);
        },

        del(row){
          for (const i in this.items) {
            if(isEq(row,this.items[i])){
              this.items.splice(i,1);
            }
          }
        }

      }

    }
  </script>
